﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org" lang="zh">
<head>
    <meta charset="UTF-8">
    <title>京东注册页面</title>
    <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}" href="../static/css/bootstrap.min.css">
    <link rel="stylesheet" th:href="@{/css/style.css}" href="../static/css/style.css">
    <script th:src="@{/js/jquery-2.1.1.min.js}" src="../static/js/jquery-2.1.1.min.js"></script>
    <script th:src="@{/js/bootstrap.min.js}" src="../static/js/bootstrap.min.js"></script>
    <style>
        *{ list-style:none; margin:0; padding:0;}
        a{ text-decoration:none; color:#F00;}
        a:hover{ color:#903; text-decoration:underline;}
        #tel{ width:260px; height:40px; font-size:14px; margin-left:140px; margin-top:50px; outline:none; border:none;}
        #wrap{ width:100%; height:800px;}
        #head{ width:1347px; height:135px;}
        .h1d1{ width:282px;height:74px;background:url(/img/zc1.png);margin-left:70px;margin-top:18px;float:left;}
        .h1d2{ margin-left:800px; margin-top:70px; font-size:18px;float:left; color:#666;}
        #zhong{width:498px; height:485px; background:url(/img/zc3.png);top:70px;left:440px; position: relative;}
        .z1{width:498px; height:300px; position: absolute; top:100px;}
        .z1h1 input{ width:400px; height:53px; color: #FFF; background:#F00; margin-top:59px; margin-left:29px;}
        #xia{ margin-top:150px;}
        #code{
            width:400px; height:40px; font-size:14px; margin-left:40px; margin-top:50px; outline:none; border:none;
        }
        #inCode{
            width: 260px; height:40px;float: left;
        }
        #telCode{
            width: 90px; height: 40px;border:1px solid;border-radius:5px;margin-left: 20px;
            float: left;font-size: 16px;font-weight: bold;line-height: 40px;cursor: pointer;
            text-align: center;
        }
        .disabled{ background: gainsboro;}
    </style>


</head>
<body>

<form id="myForm" action="/user/reg2">
    <!--隐藏域-->
    <input type="hidden" id="codeHide" value="">

    <div id="wrap">
        <div id="head">
            <div class="h1d1"></div>
            <div class="h1d2">已有账号？<a href="/index">请登录></a></div>
            <div><img src="/img/zc2.png"/></div>
        </div>
        <div id="zhong">
            <div class="z1">
                <div><input type="text" name ="tel" id="tel" placeholder="输入手机号" required/></div>
                <div id="code">
                    <input type="text" name="inCode" id="inCode" placeholder="请输入验证码" required/>
                    <div id="telCode">获取验证码</div>
                </div>
                <div class="z1h1">
                    <input type="submit" id="submit" value="下一步"/>
                </div>
            </div>
        </div>
        <div id="xia"><img src="/img/dlxia.png"/></div>
    </div>
</form>
</body>
<script>
    $("#telCode").bind('click',show);//在方法邦定.只要方法就可以
    function show(){
       if($("#tel").val().length==11){
           var telNum=$("#tel").val();//发向contro
           $.post("/user/sendCode",{"tel":telNum},function(response){
               if(response.message){
                   alert(response.message);
               }//要把收到的验证放到隐藏框中.
               if(response.code){
                   $("#codeHide").val(response.code)
               }
           },"json");
           //倒计时
           $("#telCode").unbind('click');
           $("#telCode").addClass('disabled');
           var count=60;
           var timer=setInterval(function(){
               $("#telCode").html(count+"s后");
               count--;
               if(count<=0){
                   clearInterval(timer);//清掉定时
                   $("#telCode").html("取验证码");
                   $("#telCode").removeClass('disabled');
                   $("#telCode").bind('click',show);
               }
           },1000);
       }
    }

</script>
</html>